<template>
    <el-container style="min-height: 100vh;">
        <el-aside :width="sideWidth + 'px'" style="box-shadow: 2px 0 6px rgb(0 21 41/35%);">
            <!-- 组件间传值 -->
            <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" :imgWidth="imgWidth"/>
        </el-aside>
        
        <el-container>
            <el-header style="border-bottom: 1px solid #ccc;">
                <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"/>
            </el-header>
            
            <el-main>
                <!-- 表示当前页面的子路由会在router-view里面展示 -->
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>

import Aside from "../components/Aside.vue"
import Header from "@/components/Header.vue";

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Home',
    components: {
        Aside,Header
    },
    data() {
        return {
            collapseBtnClass: 'el-icon-s-fold',
            isCollapse: false,
            sideWidth: 200,
            logoTextShow: true,
            imgWidth: 66
        }
    },
    methods: {
        collapse() { //点击收缩按钮触发
            this.isCollapse = !this.isCollapse
            if(this.isCollapse) {  //  收缩
                this.sideWidth = 64
                this.collapseBtnClass = 'el-icon-s-unfold'
                this.logoTextShow = false
                this.imgWidth = 60
            } else {  // 展开
                this.sideWidth = 200
                this.collapseBtnClass = 'el-icon-s-fold'
                this.logoTextShow = true
                this.imgWidth = 66
            }
        }
    }
}
</script>
